<template>
  <span class="module-nav-item" :class="{'is-active': isActive}" @click="onClick"><slot></slot></span>
</template>
<script>
export default {
  props: {
    isActive: Boolean
  },
  emits: ['click'],
  setup (props, { emit }) {
    const onClick = () => {
      console.log('click')
      emit('click')
    }
    return {
      onClick
    }
  }
}
</script>
<style lang="less">
.module-nav-item{
  display: inline-flex;
  align-items: center;
  justify-items: center;
  padding: 8px 12px;
  border-radius: 60px;
  color: #fff;
  cursor: pointer;
  &.is-active{
    background: #fff;
    color: rgb(122,120,236);
  }
}
</style>
